<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>CSS盒模型</title>
        <style media="screen">
            html * {
                margin: 0;
                padding: 0;
            }
            body {
                background-color: antiquewhite;
            }
            .fgx {
                width: 100%;
                height: 10px;
                background-color: tomato;
                clear: both;
            }
            .fa {
                background-color: aquamarine;
                width: 100%;
            }
            .son {
                background-color: thistle;
                width: 100px;
                height: 100px;
                opacity: 0.5;

                float: left;
            }
            .son-right {
                background-color: darkgreen;
                opacity: 0.5;
                width: 140px;
                height: 140px;
            }
        </style>
    </head>
    <body>
        <div class="fgx"></div>

        <div class="fa">
            <div class="son">11111</div>
            <div class="son">22222</div>
            <div class="son-right">33333</div>
        </div>
        <p>float: left; 左边的元素脱离文流 后面的元素 空到左边 被遮住</p>

        <div class="fgx"></div>

        <div class="fa">
            <div class="son">11111</div>
            <div class="son">22222</div>
            <div class="son-right" style="overflow: hidden">33333</div>
        </div>
        <p>给后面的子盒子 overflow: hidden</p>
    </body>
</html>
